<template>
	<el-dialog class="abow-dialog" :visible.sync="visible" top="50px" :width="((clientWidth-200)>800?800:500)+'px'"
		title="" :close-on-click-modal="false" :close-on-press-escape="false">
		<div slot="title" class="dialog-title">
			<el-row>
				<span class="dialog-title-text text-green font-weight" style="font-size: 17px;">{{(roleName?roleName+' ':'')}}</span>
				<span class="dialog-title-text">{{(roleName?'的':'')+'角色权限'}}</span>
			</el-row>
		</div>
		
		<div class="overflowy" :style="{height: clientHeight-260+'px'}">
			<el-tree ref="menuListTree" :data="treeData" show-checkbox node-key="id" :props="defaultProps" :default-expand-all="false"
				@check="handleCheckChange"></el-tree>
		</div>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	export default {
		props: {
			roleName: {
				type: String,
				required: false,
				default: ''
			}
		},
		data() {
			return {
				role_id:null,
				clientWidth: 700,
				clientHeight: 300,
				visible: false,
				defaultCheckedKeys: [],
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				roleIdListDefault: [],
				foundIds: [],
				checked_ids:[]
			}
		},
		created() {
		},
		computed: {
		},
		methods: {
			findIds(arr, permission) {
				arr.forEach(item => {
					if (permission.includes(item.url)) {
						this.foundIds.push(item.id);
					}
					if (item.children) {
						this.findIds(item.children, permission);
					}
				});
			},
			handleCheckChange(checkedNodes, checkedObj) {
				let checkedKeys = checkedObj.checkedKeys;
				console.log(checkedKeys);
				var r = checkedKeys.filter(function (s) {
					if(typeof s == 'number'){
						return s;
					}
				});
				this.checked_ids = r;
			},
			update(row) {
				this.clientWidth = document.body.clientWidth;
				this.clientHeight = document.body.clientHeight;
				this.visible = true;
				this.foundIds = [];
				this.checked_ids = [];
				this.$nextTick(() => {
					//用户拥有的权限
					let permission = row.permission || [];
					this.treeData = row.treeData || [];
					this.findIds(this.treeData, permission);
					this.checked_ids = this.foundIds;
					this.$refs.menuListTree.setCheckedKeys(this.foundIds);
				})
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				if(!this.$hasPermission('authority:authRole:authorize-save')){
					console.warn('选中项id');
					console.log(this.checked_ids);
					this.$axios.post('/api/authority/autoRule/authorizeSave', {role_id:this.role_id,menu_ids:this.checked_ids}).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false
								this.$emit('refreshDataList')
							}
						})
					}).catch(() => {})
				}else{
					this.visible = false;
					this.$emit('refreshDataList');
					this.$message({
						message: '您没有修改权限',
						type: 'warning',
						duration: 2000,
						onClose: () => {
						}
					})
				}
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss">
	.overflowy {
		overflow-y: auto;
	}

	.mod-sys__user {
		.dept-list {

			.el-input__inner,
			.el-input__suffix {
				cursor: pointer;
			}
		}

		.role-list {
			.el-select {
				width: 100%;
			}
		}
	}
</style>